{% include 'JDXJ/JDXJ_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">基础数据</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'JDXJ/JCSJ/JDXJ_JCSJ_SIDEBAR.html' %}

        <div class="am-u-sm-10" style="position: absolute;width:auto;right:0;left: 200px;height: 85%;overflow-y: scroll;">
          <div class="am-u-sm-12 am-u-md-6"  >
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="disease_add()"><span class="am-icon-plus"></span>新增设备</button>
                
                <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" id="disease_scale_add" ><span class="am-icon-plus"></span>新增检查项</button>
                
              </div>
            </div>
          </div>

          <table id="grid" class="am-table am-table-striped am-table-hover table-main am-table-compact am-text-nowrap" >
            <thead>
              <tr>
                <th class="table-title"></th>
                <th class="table-title" style="display: none;"></th>
                <th class="table-title">病害名称</th>
                <th class="table-title">序号</th>
                <th class="table-title">状态</th>
                <th class="table-title">操作</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}

<script src="/static/assets/js/jquery.min.js"></script>

<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js//layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
 <link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.datatables.css"/>
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
  .tr_select{
    background-color: #dbdcf4!important; 
  }
  .tr_tr{

  }
</style>
<script type="text/javascript">
  $.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  });
  $("#collapse-nav8").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#jdxjjcsj").css("color", "#3399CC");
  $("#jcsjrxlr").css("color", "#3399CC");
  $("#zdsjObhbd").removeClass("li_a");

  $(document).ready(function() {
    var t = $('#grid').DataTable({

      bInfo: true, 
      responsive: true,
      searching: true,
      lengthChange: false,
      paging: true,
      bStateSave: true, //保存页面状态
      aLengthMenu: [
        [10],
        [10]
      ],
      ajax: {

        url: "/QLXJ_JCSJ_BHBD_index/"
      },

      columns: [
        {
          "class": 'details-control',
          "orderable": false,
          "data": null,
          "defaultContent": ''
        },
        {
          "class": 'display',
          "orderable": false,
          "data": "disease_id",
          "defaultContent": ''
        },
        {
          "data": "disease_name"
        },
        {
          "data": "orderby"
        },
        {
          "data": "orderby"
        },
        {
          "data": "remark"
        }
      ],
      "columnDefs": [
        {
          type: 'chinese-string',
          targets: '_all'
        }
        ,
        {
          "render": function(data, type, row, meta) {
            return "有效"
          },
          "targets": 4
        },
        {
          "render": function(data, type, row, meta) {
            return '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="disease_modify(' + row.disease_id + ')"><span class="am-icon-pencil-square-o"></span> 修改</button><button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="disease_delect(' + row.disease_id + ',\'' + row.disease_name + '\')"><span class="am-icon-trash-o"></span> 删除</button></div></div>'
          },
          "targets": 5
        }
      ],
    });

    $('#grid tbody').on('click', 'td.details-control', function() {
      var tr = $(this).closest('tr');
      var row = t.row(tr);
      if(row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        //          // Open this row
        //          row.child(format(row.data())).show();
        //          tr.addClass('shown');
        format(row, tr, row.data().disease_id);
      }
    });
 
    $('#grid tbody').on( 'click', 'tr', function () {
      if($(this).hasClass('tr_tr')){
      }else{
        if ( $(this).hasClass('tr_select') ) {

            $(this).removeClass('tr_select');
            var nTds = $('td', this);
            $(this).find("td").each(function(i){
              $(nTds[i]).removeClass('tr_select');
            })
        }else {
            t.$('tr.tr_select').removeClass('tr_select');
            t.$('td.tr_select').removeClass('tr_select');
            $(this).addClass('tr_select');
            var nTds = $('td', this);
            $(this).find("td").each(function(i){
              $(nTds[i]).addClass('tr_select');
            })
        }
      }
    });

    $('#disease_scale_add').click( function () {
        var tr = t.$('tr.tr_select');
        var nTds = $('td', tr);
        var disease_id = $(nTds[1]).text();
        //console.log(disease_id)
        if(!disease_id){
          AlertMSG("请先选择相应的病害！")
        }else{
          disease_scale_add(disease_id)
        }
    });

  })


  function format(row, tr,disease_id) {
    var str = '<table id="grid_'+disease_id+'" class="am-table am-table-striped am-table-hover table-main am-table-compact am-text-nowrap" style="margin-bottom:-1rem;padding:0 0 0 50px;"><thead><tr class="tr_tr"><th class="table-title">标度</th><th class="table-title">定性描述</th><th class="table-title">定量描述</th><th class="table-title">综合描述</th><th class="table-title">状态</th><th class="table-title">操作</th></tr></thead><tbody>';
    //ajax读取本地文件
    $.ajax({
      //请求方式  
      type: "GET",
      //文件位置  
      url: "/QLXJ_JCSJ_BHBD_diseasedetails/?disease_id="+disease_id+"",
      //返回数据格式为json,也可以是其他格式如  
      dataType: "json",
      //请求成功后要执行的函数，拼接html  
      success: function(data) {
        $.each(data.data, function(i, n) {
          str += '<tr class="tr_tr"><td style="white-space:pre-wrap;">' + n.level + '</td><td style="white-space:pre-wrap;"><div style="white-space:pre-wrap;" >' + n.qualitative + '</div></td><td style="white-space:pre-wrap;">' + n.quantitative + '</td><td style="white-space:pre-wrap;">' + n.sumup + '</td><td style="white-space:pre-wrap;">有效</td><td style="width:145px;"><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="disease_scale_modify(' + n.disease_scale_id + ')"><span class="am-icon-pencil-square-o"></span> 修改</button><button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="disease_scale_delect(' + n.disease_scale_id + ',\'' + n.level + '\')"><span class="am-icon-trash-o"></span> 删除</button></div></div></td></tr>';
        });
        //console.log(str);
        str += "</tbody></table>";
        row.child(str).show();
        tr.addClass('shown');
        tr.next().addClass('tr_tr');
        //row.addClass('tr_tr');
      },
      error: function() {
        str += '出错了';
        str += "</table>";
        row.child(str).show();
        tr.addClass('shown');
      }
    });

    //console.log('over');
    return str;
  }

  function disease_add(){
    popup1("新增设备", "/JDXJ_JCSJ_RXLR_DEVICE_ADD/")
  }

  function disease_modify(disease_id){
    popup1("修改病害", "/QLXJ_JCSJ_BHBD_MODBH/?disease_id=" + disease_id + "")
  }

  function disease_delect(disease_id, name) {
    AMUI.dialog.confirm({
      title: '删除确认',
      content: '您确认删除病害[' + name + ']?',
      onConfirm: function() {
        //console.log('onConfirm,save ' + organize_id);
        $.ajax({
          "url": "/QLXJ_JCSJ_BHBD_DELBH/",
          "data":{"disease_id":disease_id},
          "datatype": "json",
          "type": "post",
          "async": "false"
        }).success(function(data) {
          if(data.status == 1) {
            window.location.reload();
          } else {
            AlertMSG(data.message)
          }
        }).error(function(data) {
          AlertMSG("删除失败！")
        });
      },
      onCancel: function() {
        console.log('onCancel')
      }
    });
  };
  function disease_scale_add(disease_id){
    popup2("新增标度", "/QLXJ_JCSJ_BHBD_addBD/?disease_id=" + disease_id + "")
  }

  function disease_scale_modify(disease_scale_id){
    console.log(disease_scale_id)
    popup2("修改标度", "/QLXJ_JCSJ_BHBD_MODBD/?disease_scale_id=" + disease_scale_id + "")
  }

  function disease_scale_delect(disease_scale_id, name) {
    AMUI.dialog.confirm({
      title: '删除确认',
      content: '您确认删除标度[' + name + ']?',
      onConfirm: function() {
        //console.log('onConfirm,save ' + organize_id);
        $.ajax({
          "url": "/QLXJ_JCSJ_BHBD_DELBD/",
          "data":{"bridge_id":bridge_id,"bridge_name":bridge_name,"user_id":user_id,"real_name":real_name,"organize_id":organize_id,"name":name,"checkdate":checkdate},
          "datatype": "json",
          "type": "post",
          "async": "false"
        }).success(function(data) {
          if(data.status == 1) {
            window.location.reload();
          } else {
            AlertMSG(data.message)
          }
        }).error(function(data) {
          AlertMSG("删除失败！")
        });
      },
      onCancel: function() {
        console.log('onCancel')
      }
    });
  };

  function popup1(title, url) {
    var index = layer.open({
      type: 2,
      title: title,
      content: url,
      area: ['600px', '260px'],

    });
  }

  function popup2(title, url) {
    var index = layer.open({
      type: 2,
      title: title,
      content: url,
      area: ['550px', '520px'],

    });
  }
  var AlertMSG = function(msg) {
    AMUI.dialog.alert({
      title: '错误提示',
      content: msg,
      onConfirm: function() {
        console.log('close');
      }
    });
  }
</script>
<style type="text/css">
  td.details-control {
    background: url('/static/assets/i/details_open.png') no-repeat center center;
    cursor: pointer;
  }

  td.display {
    display: none;
  }
  
  tr.shown td.details-control {
    background: url('/static/assets/i/details_close.png') no-repeat center center;
  }

</style>
</body>

</html>